{% assign data = section.settings %}

{% assign blockId = block_id | default : section.block_id %}
<div class="block_newsletter">
  <div class="container_wrapper">

    <div class="content flex items-center relative" style="--text-color: {{data.text_color}};--radius: {{data.radius}}px;">

      <div class="bg_img absolute w-full h-full left-0 top-0">
        {% if data.bg_image.src != '' %}
          {% include 'lazy_img',src: data.bg_image.src, alt: data.bg_image.alt %}
        {% endif %}
      </div>
      <div class="form_wrapper w-full relative z-10 flex md:justify-between md:flex-row md:items-center md:gap-24 xl:gap-48 gap-8 flex-col">
        <div class="left md:text-left text-center">
          {% if data.title != '' %}
            <div class="news_title public_title">{{data.title}}</div>
          {% endif %}
          {% if data.detail != '' %}
            <div class="news_detail mt-5">{{data.detail}}</div>
          {% endif %}
        </div>
        <div class="right">
          <div class="newsletter relative flex items-center">
            <input type="text" placeholder="{{ lang.general.email }}" id="block_email_input_{{blockId}}"/>
            <button id="newsletter_btn{{blockId}}">
              <span>{{ data.buttonName | default: 'SUBSCRIBE' }}</span>
            </button>
          </div>
        </div>
      </div>


    </div>
  </div>
</div>

<script type="text/javascript">
(function(){const blockSubmitNewsletter = moi.throttle(function () {
    var domEmail = `#block_email_input_{{blockId}}`;
    email = $(`#block_email_input_{{blockId}}`).val();
    if (email == "") {
      moi.tooltip({
        placement: "top",
        el: domEmail,
        timer: 5000,
        space: 0,
        content: "{{ lang.general.please_enter_a_valid_email_address }}",
      });
      return;
    }
    $isvalidemail =
      /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(
        email
      );
    if (!$isvalidemail) {
      moi.tooltip({
        placement: "top",
        el: domEmail,
        timer: 1000,
        space: 0,
        content: "{{ lang.general.please_enter_a_valid_email_address }}",
      });
      return;
    }
    const load = moi.nodeShowLoading(
      `#newsletter_btn{{blockId}}`,
      `{{ section.settings.buttonColor }}`
    );
    moi.ajax({
      url: "/module/newsletter",
      type: "POST",
      data: JSON.stringify({
        email: email,
      }),
      dataType: "json",
      cache: false,
      complete: function () {
        load.close();
      },
      success: function (res) {
        if (res.data && res.data.data) {
          if (res.data.new_customer) {
            callback_generate_lead();
          }
          moi.message({
            content: `{{ section.settings.newsletterTip }}`,
          });
        } else {
          moi.tooltip({
            placement: "top",
            el: domEmail,
            timer: 1000,
            space: 0,
            content: "{{ lang.general.subscribe_failed }}",
          });
        }
      },
      error: function () {
        moi.tooltip({
          placement: "top",
          el: domEmail,
          timer: 1000,
          space: 0,
          content: "{{ lang.general.connection_fails_please_retry_refresh }}",
        });
      },
    });
  }, 3000);
  $(`#newsletter_btn{{blockId}}`).click(function () {
    blockSubmitNewsletter();
  });
  $(`#block_email_input_{{blockId}}`).on("keydown", function (e) {
    if (e.which === 13) {
      blockSubmitNewsletter();
    }
  });
})()
</script>

{% schema %}
{
	"class": "block_newsletter",
	"is_global": false,
	"icon": "icon-dingyue",
	"name": {
		"zh_CN": "邮件订阅",
		"en_US": "Mail subscription"
	},
	"blocks": [],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "圆角"
			},
			"id": "radius",
			"max": 50,
			"min": 0,
			"unit": "px",
			"default": 30
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": ""
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": ""
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "订阅按钮文字",
				"en_US": "Subscribe button text"
			},
			"id": "buttonName",
			"default": ""
		},
		{
			"type": "card_textarea",
			"id": "newsletterTip",
			"label": {
				"zh_CN": "订阅成功文字",
				"en_US": "Subscribe successful text"
			},
			"placeholder": {
				"zh_CN": ""
			},
			"default": "Thank you for joining our mailing list!"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "背景图片",
				"en_US": "Background image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽度1000px以上，高度自适应",
				"en_US": "Recommended width more than 1000px, height adaptive"
			},
			"id": "bg_image"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置",
				"en_US": "Color Settings"
			}
		},
		{
			"type": "card_color",
			"id": "bg_color",
			"label": {
				"zh_CN": "背景颜色",
				"en_US": "Background color"
			},
			"default": "#fdf9ee"
		},
		{
			"type": "card_color",
			"id": "text_color",
			"label": {
				"zh_CN": "文字颜色",
				"en_US": "Text color"
			},
			"default": "#333333"
		}
	],
	"default": {
		"settings": {
			"radius": 30,
			"title": "Subscribe to our emails",
			"detail": "Be the first to know about new collections and exclusive offers.",
			"buttonName": "SUBSCRIBE",
			"newsletterTip": "Thank you for joining our mailing list!",
			"bg_image": {
				"src": "",
				"alt": ""
			},
			"bg_color": "#fdf9ee",
			"text_color": "#333333"
		},
		"blocks": []
	}
}
{% endschema %}